<%--
  Created by IntelliJ IDEA.
  User: 我的大名叫陆健伟
  Date: 2016/2/29
  Time: 10:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>我的投诉</title>
    <link rel="stylesheet" href="<c:url value='/resource/wechat/css/frozen.css'></c:url>">
    <link rel="stylesheet" href="<c:url value='/resource/wechat/css/main.css'></c:url>">
    <style>
        .ui-list-pure a{color: #000;}
        .sslk_more {
            width: 98%;
            float: left;
            margin-left: 1%;
            height: 35px;
            line-height: 35px;
            color: #fff;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 3px;
            clear: both;
            margin-top: 15px;
            margin-bottom: 15px;
            font-family: "微软雅黑", "黑体", "宋体";
            font-size: 1.0rem;
        }
        .sslk_more a {
            color: #fff;
            text-decoration: none;
        }
        #pr_list_foot {
            margin: 0;
            padding: 0;
            height: 3rem;
            line-height: 3rem;
            width: 100%;
            border: none;
            text-align: center;
            -webkit-font-smoothing: antialiased;
            font-size: 0.95rem;
            color: #aba0a0;
        }
        #pr_list_foot a {
            display: block;
            height: 3rem;
            width: 7.5rem;
            margin: 0 auto;
            padding: 0;
            text-align: center;
            font-weight: normal;
            text-decoration: none;
            color: #aba0a0;
        }
    </style>
</head>
<body class="body_bg" ontouchstart>
<section class="ui-container">
    <section id="tab">
        <div class="demo-item">
            <div class="demo-block">
                <div class="ui-tab">
                    <ul class="ui-tab-nav ui-border-b">
                        <li class="current">全部</li>
                        <li>已回复</li>
                        <li>未回复</li>
                    </ul>
                    <ul class="ui-tab-content" style="width:300%">
                        <li>
                            <ul class="ui-list ui-list-pure ui-border-tb" id="ul0">
                                <c:if test="${none == 1}">
                                    <div style='text-align: center;height: 50px; line-height: 50px;'>未查询到结果</div>
                                </c:if>
                                <c:if test="${none == 0}">
                                    <c:forEach var="compltCenter" items="${pager.list}">
                                        <li class="ui-border-t" onclick=gotoCompDetail("${compltCenter.projectGuid}")>
                                            <h4><a href="javascript:void(0)">${compltCenter.sxmc}</a></h4>
                                            <p><span>举报时间</span><span class="date">${compltCenter.jbsxTime}</span></p>
                                        </li>
                                    </c:forEach>
                                </c:if>
                            </ul>
                        </li>
                        <li>
                            <ul class="ui-list ui-list-pure ui-border-tb" id="ul1">
                            </ul>
                        </li>
                        <li>
                            <ul class="ui-list ui-list-pure ui-border-tb" id="ul2">
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <form id="prjForm" action="<c:url value='/api/complaint/compltDetail'/>" method="post" style="display: none"></form>
            <script class="demo-script">
            </script>
        </div>
        <c:if test="${noMore == 0}">
            <div id="pr_list_foot"><a class="foot_icon" onclick="more(this);" href="javascript:void(0)" id="moreButton">加载更多</a></div>
        </c:if>
    </section>
</section>
</body>
<script src="<c:url value='/resource/wechat/js/zepto.min.js'/>"></script>
<script src="<c:url value='/resource/js/jquery.form.min.js'/>"></script>
<script src="<c:url value='/resource/wechat/js/frozen.js'/> "></script>
<script class="demo-script">
    var currentPage = 0;
    var isReply = "";
    var gotoIndex = 0;
    (function() {
        var tab = new fz.Scroll('.ui-tab', {
            role: 'tab',
            autoplay: false,
            interval: 3000
        });
        /* 滑动开始前 */
        tab.on('beforeScrollStart', function(fromIndex, toIndex) {
            console.log(fromIndex, toIndex); // from 为当前页，to 为下一页
            if(toIndex == 0){
                isReply = "";
            }else if(toIndex == 1){
                isReply = "1";
            }else {
                isReply = "0";
            }
            gotoIndex = toIndex;
            currentPage = 1;
            getData();
        })
    })();
</script>
<script>
    currentPage = 1;

    function more(obj){
        $(obj).html("加载中");
        currentPage += 1;
        loadMore(currentPage);
    }

    function getData(){
        $.ajax({
            type : "post",
            data : '{"isReply":"' + isReply + '","userGuid":"' + "${userGuid}" + '","pageNum":' + currentPage + '}',
            url : "<c:url value='/api/complaint/list'/>",
            dataType : "json",
            contentType: "application/json;charset=utf-8",
            success : function(resp){
                if(resp&&resp.succ) {
                    var _data = resp.data.list;
                    var _html = "";
                    for (var i = 0; i < _data.length; i++) {
                        var _item = _data[i];
                        var prjGuid = _item.projectGuid;
                        _html += '<li class="ui-border-t" onclick=gotoCompDetail("'+ prjGuid +'")><h4><a href="javascript:void(0)">' + _item.sxmc + '</a></h4><p><span>申报时间</span><span class="date">'
                                + _item.jbsxTime + '</span></p>';
                    }
                    $("#ul"+gotoIndex).html(_html);
                    if(_data.length > 4){
                        $("#pr_list_foot").css("display", "block");
                        $("#moreButton").html("加载更多");
                    }else if(_data.length <= 4 && _data.length > 0){
                        $("#pr_list_foot").css("display", "none");
                    }else {
                        $("#ul"+gotoIndex).html("<div style='text-align: center;height: 50px; line-height: 50px;'>未查询到结果</div>");
                        $("#pr_list_foot").css("display", "none");
                    }
                }else {
                    $("#ul"+gotoIndex).html("<div style='text-align: center;height: 50px; line-height: 50px;'>未查询到结果</div>");
                    $("#pr_list_foot").css("display", "none");
                }
            }
        });
    }

    function loadMore(page){
        if(!page){
            page = 1;
        }
        $.ajax({
            type : "post",
            url : "<c:url value='/api/complaint/list'/>",
            dataType : "json",
            timeout : 6000 ,
            data : '{"isReply":"' + isReply + '","userGuid":"' + "${userGuid}" + '","pageNum":' + page + '}',
            contentType: "application/json;charset=utf-8",
            async : false,
            beforeSend:function(){
                $(".sslk_more").html("数据加载中");
            },
            success : function(resp){
                if(resp&&resp.succ){
                    var _data = resp.data.list;
                    var _html = "";
                    for(var i=0;i<_data.length;i++){
                        var _item = _data[i];
                        var prjGuid = _item.projectGuid;
                        _html += '<li class="ui-border-t" onclick=gotoCompDetail("'+ prjGuid +'")><h4><a href="javascript:void(0)">' + _item.sxmc + '</a></h4><p><span>申报时间</span><span class="date">'
                                + _item.jbsxTime + '</span></p>';
                    }
                    $("#ul"+gotoIndex).append(_html);
                    if(_data.length > 4){
                        $("#pr_list_foot").css("display","block");
                        $("#moreButton").html("加载更多");
                    }else{
                        $("#pr_list_foot").css("display", "none");
                    }
                }else {
                    $("#pr_list_foot").css("display", "block");
                    $("#moreButton").html("无更多数据");
                }
            }
        });
    }

    function gotoCompDetail(prjGuid){
        $("#prjForm").html("<input name='projectGuid' value='"+ prjGuid +"'/>");
        $("#prjForm").submit();
    }

</script>
</html>
